<!DOCTYPE html>
<html>
<head>
	<title>navbar</title>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html;">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">


<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->



	<link rel="stylesheet" type="text/css" href="css/base.css">

</head>
<body>
	<div class="header ">
		<!-- 电脑端导航 -->
		<div class="container hidden-xs hidden-sm pc fixed-pc">
			<div class="row ">
				<div class="col-lg-1 col-lg-offset-1 col-md-3 navbar-logo">
					<a href="#"><img src="images/logo_blue.png"></a>
				</div>
				<div class="col-lg-9 col-lg-offset-1 col-md-9 navbar-menu">
					<ul class="menu list-unstyled list-inline">
						<li class="menu-item">
							<a href="" class="menu-header">视频监控</a>
							<div class="menu-warp">
								<div class="col-nav">
							 		<a href="" class="nav-title">感知型摄像机</a>
									<dl class="nav-list">
										<dd><a href="">特征分析</a></dd>
										<dd><a href="">人员分析</a></dd>
										<dd><a href="">车辆分析</a></dd>
									</dl>
								</div>
								<div class="col-nav">
									<a href="" class="nav-title">球型摄像机</a>
									<dl class="nav-list">
										<dd><a href="">特征分析</a></dd>
										<dd><a href="">人员分析</a></dd>
										<dd><a href="">车辆分析</a></dd>
									</dl>
								</div>
							</div>
						</li>
						<li class="menu-item">
							<a href="" class="menu-header">视频会议</a>
							<div class="menu-warp">
								<div class="col-nav">
							 		<a href="" class="nav-title">平台</a>
									<dl class="nav-list">
										<dd><a href="">平台1</a></dd>
										<dd><a href="">平台2</a></dd>
										<dd><a href="">平台3</a></dd>
									</dl>
								</div>
								<div class="col-nav">
									<a href="" class="nav-title">网呈</a>
									<dl class="nav-list">
										<dd><a href="">网呈1</a></dd>
										<dd><a href="">网呈2</a></dd>
										<dd><a href="">网呈3</a></dd>
									</dl>
								</div>
							</div>
						</li>
						<li class="menu-item">
							<a href="" class="menu-header">解决方案</a>
							<div class="menu-warp">
								<div class="col-nav">
							 		<a href="" class="nav-title">解决方案</a>
									<dl class="nav-list">
										<dd><a href="">公安</a></dd>
										<dd><a href="">教育</a></dd>
										<dd><a href="">交通</a></dd>
									</dl>
								</div>
								<div class="col-nav">
									<a href="" class="nav-title">成功案例</a>
									<dl class="nav-list">
										<dd><a href="">土耳其老爷爷</a></dd>
										<dd><a href="">安全城市</a></dd>
										<dd><a href="">韩国消防</a></dd>
									</dl>
								</div>
							</div>						
						</li>
						<li class="menu-item">
							<a href="" class="menu-header">合作伙伴</a>
							<div class="menu-warp">
								<div class="col-nav">
									<dl class="nav-list">
										<dd><a href="">政策介绍</a></dd>
										<dd><a href="">合作伙伴查询</a></dd>
										<dd><a href="">供应商查询</a></dd>
									</dl>
								</div>
							</div>							
						</li>
						<li class="menu-item">
							<a href="" class="menu-header">服务支持</a>
							<div class="menu-warp">
								<div class="col-nav">						 		
									<dl class="nav-list">
										<dd><a href="">服务支持</a></dd>
										<dd><a href="">下载中心</a></dd>
										<dd><a href="">供应商查询</a></dd>
									</dl>
								</div>
							</div>
						</li>
						<li class="menu-item">
							<a href="" class="menu-header">关于我们</a>
							<div class="menu-warp">
								<div class="col-nav">						 		
									<dl class="nav-list">
										<dd><a href="">公司荣誉</a></dd>
										<dd><a href="">新闻中心</a></dd>
										<dd><a href="">活动中心</a></dd>
									</dl>
								</div>
							</div>						
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 手机端导航 -->
		<div class="container ">

			<div class="row hidden-lg hidden-md phone fixed-phone">
				<div class="col-sm-8 col-xs-8">
					<div class="phone-logo">
					</div>
				</div>
				<div class="col-sm-4 col-xs-4">
					<div class="phone-menu">
					</div>
				</div>
				<div class="drop-menu">
					<dl class="">
							<dd><a href="">视频监控</a></dd>
							<dd><a href="">视频会议</a></dd>
							<dd><a href="">解决方案</a></dd>
							<dd><a href="">合作伙伴</a></dd>
							<dd><a href="">服务支持</a></dd>
							<dd><a href="">关于我们</a></dd>
					</dl>
				</div>
			</div>
		</div>		
	</div>
<div class="container">
	<div class="row">
		<div style="height: 800px;background-color: lightblue;">
			<p>12</p>
			<p style="margin-top:400px;background-color: green;">34</p>
		</div>
	</div>
</div>
</body>

<script type="text/javascript">
$(function(){
	//移入展示下拉列表
	$(".menu-header").hover(function(){
		$(".menu-warp").slideUp(0);
		$(this).next().slideDown(0);
	},function(e){
		if(!$(e.target).hasClass(".menu-header")){
			$(".menu-warp").slideUp(0);
		}
	});
	$(".menu-warp").hover(function(){
		$(this).css("display","block");
	},function(){
		$(this).slideUp(0);
	});

	//手机端点击下拉与收起
	$(".phone-menu").on("click",function(){
		 if($(".drop-menu").css("display")=="none"){
		 	$(".drop-menu").slideDown(1000);
		 }else{
			$(".drop-menu").slideUp(1000);
		 }
	});
	$("body").on('touchend', function(e){
      if($(e.target).parents(".drop-menu").length<=0){
         $(".drop-menu").slideUp();
      }
  	});
});

</script>
</html>